<template>
  <div class="section-dialog">
    <my-tabs :tab-list="tabList"></my-tabs>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="92px" size="mini">
      <el-form-item label="课时名称" prop="title">
        <el-input v-model="ruleForm.title" placeholder="请输入课时名称"></el-input>
      </el-form-item>
      <el-form-item label="课时类型" prop="course_data_type">
        <el-radio-group v-model="ruleForm.course_data_type" @change="handleChange">
          <el-radio :label="1">视频</el-radio>
          <el-radio :label="2">音频</el-radio>
          <el-radio :label="3">图文</el-radio>
          <el-radio :label="4">电子书</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="课件上传"
        :prop="sectionType == 3 ? 'course_data_txt' : 'course_data_attach_id'"
      >
        <SelectMaterial
          :type="3"
          :value.sync="ruleForm.course_data_attach_id"
          v-if="sectionType == 1"
        ></SelectMaterial>
        <SelectMaterial
          :type="2"
          :value.sync="ruleForm.course_data_attach_id"
          v-else-if="sectionType == 2"
        ></SelectMaterial>
        <edu-editor
          :value.sync="ruleForm.course_data_txt"
          v-else-if="sectionType == 3"
        ></edu-editor>
        <SelectMaterial
          :type="4"
          :value.sync="ruleForm.course_data_attach_id"
          v-else-if="sectionType == 4"
        ></SelectMaterial>
      </el-form-item>
      <!--  <el-form-item label="资料上传">
        <edu-upload
          :args="argsMaterial"
          :value.sync="ruleForm.material_id"
          :fileList="materialFileList"
        ></edu-upload>
      </el-form-item> -->
      <el-form-item>
        <el-button @click="handleSubmitForm('ruleForm')" size="mini" type="primary">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import MyTabs from '../../../components/myTab.vue'
// import EduUpload from '@/components/EduUpload'
import EduEditor from '@/views/my/classes/material/select/components/editor'
import SelectMaterial from '@/views/my/classes/material/select/index'
export default {
  components: {
    MyTabs,
    // EduUpload,
    EduEditor,
    SelectMaterial
  },
  data() {
    // 上传文件
    var attachCard = (rule, value, callback) => {
      if (value == 0) {
        if (this.sectionType == 3) {
          callback(new Error('请输入图文内容'))
        } else {
          callback(new Error('请选择上传的课件'))
        }
      } else {
        callback()
      }
    }
    return {
      tabList: [
        {
          title: '添加课时'
        }
      ],
      rules: {
        title: [{ required: true, message: '请输入课时名称', trigger: 'blur' }],
        course_data_type: [{ required: true, message: '请选择课时类型', trigger: 'change' }],
        course_data_attach_id: [{ required: true, validator: attachCard, trigger: 'blur' }],
        course_data_txt: [{ required: true, validator: attachCard, trigger: 'blur' }]
      },
      argsMaterial: {
        limit: 1,
        upload_type: 'textList',
        placeholder: '多个资料请上传压缩包'
      },
      ruleForm: {
        title: '',
        course_data_type: 1,
        course_data_attach_id: 0,
        material_id: 0,
        course_data_txt: ''
      },
      materialFileList: [],
      sectionType: 1,
      courseDataFilename: ''
    }
  },
  methods: {
    // 课时
    handleSubmitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$api.createTeacherCourseSectionData(
            this.$route.params.id,
            this.$route.query.id,
            {
              title: this.ruleForm.title,
              course_data_type: this.ruleForm.course_data_type,
              course_data_attach_id: this.ruleForm.course_data_attach_id,
              material_id: this.ruleForm.material_id,
              course_data_txt: this.ruleForm.course_data_txt
            },
            res => {
              this.$message.success(res.msg)
              this.$router.push({
                path: '/my/classes/teach/video/' + this.$route.params.id
              })
            },
            error => {
              this.$message.error(error.msg)
            }
          )
        }
      })
    },
    // 课程类型
    handleChange(val) {
      this.sectionType = val
      if (val == 3) {
        this.ruleForm.course_data_txt = ''
      } else {
        this.ruleForm.course_data_attach_id = 0
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.section-dialog {
  ::v-deep .el-dialog {
    .el-dialog__header {
      border-bottom: 1px solid $border-color-divider;
      .el-dialog__title {
        font-size: 15px;
      }
    }
  }
  ::v-deep .el-form {
    .el-form-item {
      .el-input {
        width: 224px;
      }
      .el-form-item__label {
        font-size: 12px;
      }
    }
  }
}
</style>
